<template>
  <div class="login">
    <div class="title">注册页</div>
    <div class="block">
        <input type="text" v-model="fromdata.phone" placeholder="请输入手机号">
    </div>
    <div class="block">
        <input type="password" v-model="fromdata.pass" placeholder="请输入密码">
    </div>
    <div class="block">
        <input type="password" v-model='fromdata.checkpass' placeholder="请输入确定密码">
    </div>
    <div class="btn" @click="register">
        <input type="button" value="注册">
    </div>

  </div>
</template>

<script>
import { Toast } from 'vant';
import { user_register } from '@/utlis/api'
export default {
    data(){
        return{
            fromdata:{
                phone:'',
                pass:'',
                checkpass:'',
            }
        }
    },
    methods:{
        // 深拷贝
        
        register(){
            // 正侧
            if( /^1[3-9]\d{9}$/.test(this.fromdata.phone) == false){
                Toast("请输入合法手机号")
            }else if( !this.fromdata.pass || !this.fromdata.checkpass ){
                Toast("请输入密码/正确密码")
            }else if( this.fromdata.pass !== this.fromdata.checkpass){
                Toast("输入密码不一致")
            }else{
                // 深拷贝
                var newdata = JSON.parse(JSON.stringify(this.fromdata));
                // 删除确定密码
                delete newdata.checkpass
                user_register( newdata ).then((res)=>{
                    console.log(res.data);
                    if(res.data.code == 200 ){
                        Toast.success(res.data.msg + "前往登录页")
                        this.$router.push('/login')
                    }else{
                        Toast.fail(res.data.msg)
                    }
                })
            }
            
        }
    }

}
</script>

<style lang="scss" scoped>
.login{
    margin: 50px 20px;
    .title{
        text-align: center;
        padding: 20px;
        font-weight: 600;
    }
    input{
        border: 0;
        outline: none;
        width: 100%;
        height: 40px;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 20px;
        margin: 20px 0;
        line-height: 0px;
    }
}

</style>